<script lang="ts" setup>

import {ref ,watch, nextTick } from 'vue'
import {companyInfoUpdateSerive} from '@/api/company.js'
import { ElMessage } from 'element-plus'
const content= ref<string>('')

const dialogFormVisible = ref(false)
const props = defineProps({
   name:{
    type:String,
    required: true
   },
   content:{
    type:String,
    required: true
   }
})
const open = async()=>{
    dialogFormVisible.value = true
    await nextTick() // 等待DOM更新
    content.value = props.content   
}

defineExpose({
    open
})

const cancel = ()=>{
content.value = ''
dialogFormVisible.value = false
}
const submit = async () => {
  try {


    await companyInfoUpdateSerive({
      name: props.name,
      content: content.value // 修复：添加.value获取ref值
    })
    content.value = ''
    dialogFormVisible.value = false
    ElMessage.success(`更新公司${props.name}信息成功！`);
    
  } catch (err) {
    // 修正：使用ElMessage显示错误，不抛出新错误
    ElMessage.error(`更新失败: ${(err as Error).message || '未知错误'}`);
    // 可选：添加错误日志上报
    console.error('API调用失败:', err);
  }
};
watch(() => props.content, (newVal) => {
 
  content.value = newVal || ''
})

</script>


<template>
<div>
      <el-dialog v-model="dialogFormVisible" :title="props.name" width="500">
    <el-form >
  <QuillEditor 
    v-model:content="content" 
    contentType="text" 
    theme="snow"
  />
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</div>
</template>


<style lang="scss" scoped>
:deep(.ql-container ){
  min-height: 400px;
}
</style>